import React, { useEffect, useRef, useState } from "react"
import { useFormField } from "../context/FormContext";
import { useMainContext } from "../context/MainContext";

import { useOnEventBus, publishEventBus, eventBus} from "../eventBus/eventBus";

export default function Input(props){
    
    const mainContext = useMainContext();

    const {
        value,
        onChange
    } = useFormField({
        fieldPath : "name"
    });

    function a(e){
        window.eventBus2.emit("label.update", e.target.value);
        // publishEventBus("label.update", e.target.value);
    }
    
    return <>
        <p>
            context2.name: {value}
        </p>
        <input 
            type="text"
            value={value}
            onChange = {(e)=>{
                onChange(e.target.value);
                eventBus.publish("main.update")
            }}
            onBlur = {(e)=>{
                a(e)
            }}
        ></input>
    </>
}